<!DOCTYPE html>
<html>
  <head>
    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css">
    <link rel="import" href="../tf-image-dashboard.html">
    <title>Image Dashboard Demo</title>
    <style>
      #container{
        width: 500px;
        height: 800px;
        border: 2px solid grey;
      }
      html,body {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <script>
      TF.Urls.runsUrl = function() {
        return "data/runs.json"
      };
      TF.Urls.imagesUrl = function(tag, run) {
        return "data/images/" + run + "/" + tag + ".json";
      };
      TF.Urls.individualImageUrl = function(query) {
        return "data/individualImage/" + query + ".png";
      }
    </script>

    <p>The image dashboard is deliberately inside a small container
    so that it's easy to test that the scroll bars display properly.</p>
    <p>Looks goofy though.</p>
    <div id="container">
      <tf-image-dashboard id="demo"></tf-image-dashboard>
    </div>
  </body>
</html>
